<div class="orderContainer" id="stateDetail">
    <div class=" bgcf2">
        <!--桩信息-->
        <div class="headMsg fs15 clearfix color333 bd-b pt15 pb15">
            <div class="fl" style="width: 57%">
            <p class="fs16"><i ng-bind="stationDetail.stationName"></i>充电站</p>
            <p class="color888 park fs15" ng-bind="stationDetail.address">环球中心E2楼地下停车场</p>           </div>
            <div class="fr fs14">
                <a href="javascript:;" class="color333 fl" ng-click="forbidden||collect(stationDetail.stationId)"><i class="icon collect" ng-class="['active','default'][activeStyle]"></i></a>
                <a href="javascript:" ng-click="naviGation(stationDetail.address);" class="color333 navBtn bd-l text-r fr"><i class="icon nav"></i>导航
				<br>
				<span  class="fr color888 mt5" ng-bind="(distancestr | strTranformNum:distancestr)+'km'">0.8</span></a>
            </div>
        </div>
        <div class=" pt15 pb15 fs14 weui-form-preview__item color8888 flex">
            <div class="descL">
                <p>
                    <i class="icon dc" ng-class="['dc','ac'][pileType]"></i>
                    <span class="mr5">直流桩</span>
                    <span class="mr5">快冲(<em ng-bind="stationDetail.directNum"></em>)</span>
                    <span ng-class="{false: 'color888', true: 'colorBlue'}[isDCFreeNight]">
                        {{isDCFree | getValueInStaticFilter : 'isDCFreeArray' }}
                    </span>
                </p>
                <p>
                    <i class="icon ac" ng-class="['dc','ac'][pileType]"></i>
                    <span class="mr5">交流桩</span>
                    <span class="mr5">慢充(<em ng-bind="stationDetail.alternateNum"></em>)</span>
                    <span ng-class="{false: 'color888', true: 'colorBlue'}[isACFreeNight]">
                        {{isACFree | getValueInStaticFilter : 'isACFreeArray' }}
                    </span>
                </p>
            </div>
            <div class="descR  bd-l text-c">
                <a class="parking ">
                    <i class="map icon"></i>
                    <span class="color888">地下停车场</span>
                </a>
            </div>
        </div>
    </div>
    <div class="tab  bd-t ">
        <div class="title flex">
            <a class="flex1 text-c color333 fs16 bd-r" href="javascript:;" ng-class="['active','default'][stateTab]" ng-click="stateFun(0)">桩位</a>
            <a class="flex1 text-c color333 fs16" href="javascript:;" ng-class="['default','active'][stateTab]" ng-click="stateFun(1)">详情</a>
        </div>
    </div>
    <div class="pileC flex pileList fs15" ng-show="pileC" ng-repeat="chargerList in chargerList">
        <div class="color888 fs15 text-l" style="width: 77px;">
            <em class="fs18" ng-bind="chargerList.serialNo">1</em><span class="mr10 ml10">号桩</span>
        </div>
        <div class="pileType bd-l color888">
            <p>
                <span>
                    {{chargerList.chargerType | getValueInStaticFilter : 'chargerTypeArray' }}
                </span>
            </p>
            <p  ng-class="{colorBlue:chargerList.plugNoList[0].chargeStatus=='0'}">
                {{chargerList.plugNoList[0].chargeStatus | getValueInStaticFilter : 'chargerStatusArray' }}
            </p>
        </div>
        <div class="appoint text-r">
            <a href="javascript:;" class="arrowR" ng-class="{colorBlue:chargerList.plugNoList[0].chargeStatus=='0',colorG3:chargerList.plugNoList[0].chargeStatus!=='0'}" ng-click="startrRservation(chargerList.qrCode,chargerList.plugNoList[0].chargeStatus)">预约</a>
        </div>
    </div>
    <div class="pileD" ng-show="pileD">
        <div class="stars bgcf2 fs15">
            <span>站点评分：</span>
            <span>{{stationDetail.fScore}}</span>
            <i class="star icon" ng-class="['default','hfStar','active','active','active','active','active','active','active','active','active'][(score|gradeNum)*2]"></i>
            <i class="star icon" ng-class="['default','default','default','hfStar','active','active','active','active','active','active','active'][(score|gradeNum)*2]"></i>
            <i class="star icon" ng-class="['default','default','default','default','default','hfStar','active','active','active','active','active'][(score|gradeNum)*2]"></i>
            <i class="star icon" ng-class="['default','default','default','default','default','default','default','hfStar','active','active','active'][(score|gradeNum)*2]"></i>
            <i class="star icon" ng-class="{'9':'hfStar','10':'active'}[(score|gradeNum)*2]"></i>
        </div>
        <div class="bgcf2 desc">
            <h3 class="fs15 color333 ptb1 bd-b">费用说明：</h3>
            <div class="fs15 ptb1">
                <p>充电费：<span class="colorBlue" ng-bind="stationDetail.chargePriceDescription.slice(0,-3)"></span>元/度</p>
                <p>服务费：<span class="colorBlue" ng-bind="stationDetail.servicePriceDescription.slice(0,-3)"></span>元/小时</p>
                <p class="color888 fs14">充电费根据不同时段进行收费，服务费视不同运营商会有差异。</p>
            </div>
        </div>
        <div class="bgcf2 fs15">
            <p class="ptb1 bd-b">开放时间：<span class="colorBlue" ng-bind="stationDetail.holidayOpenTime">00:00-24:00</span></p>
            <p class="ptb1">运营商：<span class="colorBlue" ng-bind="stationDetail.operName">电桩</span></p>
        </div>
    </div>
</div>
